<template>
  <view class="question-template">
    <!-- 题目展示 -->
    <view class="question-content">
      <text class="question-text">{{ props.info?.content }}</text>
    </view>

    <!-- 选项按钮 -->
    <view class="options-list">
      <button v-for="(option, index) in props.info?.options" :key="index" class="option-btn" :class="{ selected: props.info?.answer === index }">
        {{ index }}. {{ option }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
});

onMounted(() => {
  console.log(props.info.options);
});
</script>

<style lang="scss" scoped>
.question-template {
  height: 100%;
  width: 100%;
  flex: 6;
  padding: 20rpx;

  .question-content {
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;

    .question-text {
      font-size: 32rpx;
      color: $uni-color-1;
    }
  }

  .options-list {
    width: 100%;
    height: 100rpx;

    .option-btn {
      margin-top: 26rpx;
      width: 70%;
      padding: 14rpx 0;
      border-radius: 10rpx;
      border: 1rpx solid #999;
      background-color: #fff;
      color: #666;
      font-size: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      &.selected {
        background-color: #1ab394;
      }
    }
  }
}
</style>
